%color-list {
    // scss-lint:disable SelectorFormat
    &.inca_silver {
        border-color: $tlp-swatch-inca-silver;
        background: $tlp-swatch-inca-silver;

        &:hover:not(:disabled):not(.disabled):not(:active) {
            border-color: darken($tlp-swatch-inca-silver, 5%);
            background: darken($tlp-swatch-inca-silver, 5%);
        }
    }

    &.chrome_silver {
        border-color: $tlp-swatch-chrome-silver;
        background: $tlp-swatch-chrome-silver;

        &:hover:not(:disabled):not(.disabled):not(:active) {
            border-color: darken($tlp-swatch-chrome-silver, 5%);
            background: darken($tlp-swatch-chrome-silver, 5%);
        }
    }

    &.fiesta_red {
        border-color: $tlp-swatch-fiesta-red;
        background: $tlp-swatch-fiesta-red;

        &:hover:not(:disabled):not(.disabled):not(:active) {
            border-color: darken($tlp-swatch-fiesta-red, 5%);
            background: darken($tlp-swatch-fiesta-red, 5%);
        }
    }

    &.teddy_brown {
        border-color: $tlp-swatch-teddy-brown;
        background: $tlp-swatch-teddy-brown;

        &:hover:not(:disabled):not(.disabled):not(:active) {
            border-color: darken($tlp-swatch-teddy-brown, 5%);
            background: darken($tlp-swatch-teddy-brown, 5%);
        }
    }

    &.clockwork_orange {
        border-color: $tlp-swatch-clockwork-orange;
        background: $tlp-swatch-clockwork-orange;

        &:hover:not(:disabled):not(.disabled):not(:active) {
            border-color: darken($tlp-swatch-clockwork-orange, 5%);
            background: darken($tlp-swatch-clockwork-orange, 5%);
        }
    }

    &.red_wine {
        border-color: $tlp-swatch-red-wine;
        background: $tlp-swatch-red-wine;

        &:hover:not(:disabled):not(.disabled):not(:active) {
            border-color: darken($tlp-swatch-red-wine, 5%);
            background: darken($tlp-swatch-red-wine, 5%);
        }
    }

    &.acid_green {
        border-color: $tlp-swatch-acid-green;
        background: $tlp-swatch-acid-green;

        &:hover:not(:disabled):not(.disabled):not(:active) {
            border-color: darken($tlp-swatch-acid-green, 5%);
            background: darken($tlp-swatch-acid-green, 5%);
        }
    }

    &.army_green {
        border-color: $tlp-swatch-army-green;
        background: $tlp-swatch-army-green;

        &:hover:not(:disabled):not(.disabled):not(:active) {
            border-color: darken($tlp-swatch-army-green, 5%);
            background: darken($tlp-swatch-army-green, 5%);
        }
    }

    &.sherwood_green {
        border-color: $tlp-swatch-sherwood-green;
        background: $tlp-swatch-sherwood-green;

        &:hover:not(:disabled):not(.disabled):not(:active) {
            border-color: darken($tlp-swatch-sherwood-green, 5%);
            background: darken($tlp-swatch-sherwood-green, 5%);
        }
    }

    &.ocean_turquoise {
        border-color: $tlp-swatch-ocean-turquoise;
        background: $tlp-swatch-ocean-turquoise;

        &:hover:not(:disabled):not(.disabled):not(:active) {
            border-color: darken($tlp-swatch-ocean-turquoise, 5%);
            background: darken($tlp-swatch-ocean-turquoise, 5%);
        }
    }

    &.daphne_blue {
        border-color: $tlp-swatch-daphne-blue;
        background: $tlp-swatch-daphne-blue;

        &:hover:not(:disabled):not(.disabled):not(:active) {
            border-color: darken($tlp-swatch-daphne-blue, 5%);
            background: darken($tlp-swatch-daphne-blue, 5%);
        }
    }

    &.lake_placid_blue {
        border-color: $tlp-swatch-lake-placid-blue;
        background: $tlp-swatch-lake-placid-blue;

        &:hover:not(:disabled):not(.disabled):not(:active) {
            border-color: darken($tlp-swatch-lake-placid-blue, 5%);
            background: darken($tlp-swatch-lake-placid-blue, 5%);
        }
    }

    &.deep_blue {
        border-color: $tlp-swatch-deep-blue;
        background: $tlp-swatch-deep-blue;

        &:hover:not(:disabled):not(.disabled):not(:active) {
            border-color: darken($tlp-swatch-deep-blue, 5%);
            background: darken($tlp-swatch-deep-blue, 5%);
        }
    }

    &.plum_crazy {
        border-color: $tlp-swatch-plum-crazy;
        background: $tlp-swatch-plum-crazy;

        &:hover:not(:disabled):not(.disabled):not(:active) {
            border-color: darken($tlp-swatch-plum-crazy, 5%);
            background: darken($tlp-swatch-plum-crazy, 5%);
        }
    }

    &.peggy_pink {
        border-color: $tlp-swatch-peggy-pink;
        background: $tlp-swatch-peggy-pink;

        &:hover:not(:disabled):not(.disabled):not(:active) {
            border-color: darken($tlp-swatch-peggy-pink, 5%);
            background: darken($tlp-swatch-peggy-pink, 5%);
        }
    }

    &.flamingo_pink {
        border-color: $tlp-swatch-flamingo-pink;
        background: $tlp-swatch-flamingo-pink;

        &:hover:not(:disabled):not(.disabled):not(:active) {
            border-color: darken($tlp-swatch-flamingo-pink, 5%);
            background: darken($tlp-swatch-flamingo-pink, 5%);
        }
    }
}

%color-area {
    @extend %color-list;

    display: block;
    height: 25px;
    border-radius: 3px;
}

#provider-admin-modal-name-container {
    display: flex;
}

#provider-admin-modal-name {
    flex: 1 1 auto;
}

#provider-admin-modal-icon,
#provider-admin-modal-color {
    margin: 0 0 $tlp-spacing ($tlp-spacing * 2);
}

.provider-icon-selector,
.provider-color-selector {
    width: 80px;
}

.provider-icon-results {
    // scss-lint:disable SelectorFormat

    .select2-results__option {
        text-align: center;

        &[aria-selected="true"] {
            padding: 6px 12px;

            &::before {
                display: none;
            }
        }
    }
}

.provider-icon-container {
    text-align: center;
}

// Shim fa-circle-blank from FontAwesome 3
#provider-admin-modal-icon,
.provider-icon-results,
#provider-admin-modal-provider-button {
    .fa-circle-blank::before {
        font-family: FontAwesome;
        font-style: normal;
        content: '\f10c';
    }
}

.provider-color-container {
    span {
        @extend %color-area;
    }
}

.provider-color-results {
    // scss-lint:disable SelectorFormat
    height: 250px;

    .select2-results__option {
        padding: 3px 12px;
    }

    .select2-results__option[aria-selected="true"] {
        padding: 3px 12px 3px 32px;
    }

    span {
        @extend %color-area;
    }
}

#provider-admin-modal-userinfo-endpoint-container {
    margin: 0 0 ($tlp-spacing * 2);
}

#provider-admin-modal-provider-button-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    background-color: #f0f8ff;
}

#provider-admin-modal-preview-label {
    font-weight: 600;
    line-height: 1.5;
}

#provider-admin-modal-provider-button {
    @extend %color-list;

    transition: box-shadow 50ms linear;
    box-shadow: inset 0 20px 40px -10px rgba(255, 255, 255, .2);

    &:hover {
        transition: box-shadow 50ms linear;
        box-shadow: none;
    }
}
